{% extends 'layout.html'%}

{% block content%}
<div class="article-list">
    <h4 class="text-center article-title">{{content.title}}</h4>
    <p class="text-center">
        <span>作者：</span>
        <a href="#">{{content.user.username}}</a>&nbsp;
        <span>时间：</span>
        <a href="#">{{content.addTime | date('Y-m-d H:i:s',-8*60)}}</a>&nbsp;
        <span>阅读：</span>
        <a href="#">{{content.views}}</a>&nbsp;
        <span>评论：</span>
        <a href="#">{{content.comments.length}}</a>
    </p>
    <p>{{content.description}}</p>
    <p>{{content.content}}</p>
</div>
<div class="jumbotron">
    <div style="display: flex;justify-content: space-between;align-items: center">
        <span>评论</span>
        <p style="font-size: 16px;">
            一共 <span class="Allcomment"></span>条
        </p>

    </div>
    {% if userInfo._id %}
    <p>aaaa</p>
    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-12">
                <input type="hidden" id="contentId" value="{{content._id.toString()}}">
                <textarea type="text" class="form-control" id="comm" placeholder="输入评论内容"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <button type="button" id="commBtn" class="btn btn-default">提交</button>
            </div>
        </div>
    </form>
    {% else %}
    <p class="bg-primary text-center" style="font-size: 16px;padding: 15px 0">还没有登录,请先的登录</p>
    {% endif %}
    <p class="noComments"></p>
    <style>
        .commentlist {
            display: flex;
            justify-content: space-between
        }
    </style>
    <div class="media">
        <div class="media-body commentWrap">
            <div class="commentlist">
                <p>admin</p>
                <p>312165</p>
            </div>
            <h4 class="media-heading">hhhh</h4>
        </div>
    </div>
</div>
<nav aria-label="...">
    <ul class="pager">
        <li class="Previous"><a href="#">Previous</a></li>
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</nav>

{%endblock%}